<template>
  <div>
    <div class="title">
      <p><span>状态:</span><span class="state" :class="{normal :this.viewForm.operateState === 100,process:this.viewForm.operateState === 2,empty:this.viewForm.operateState === 1 || this.viewForm.operateState === 101}">{{$dictUtils.getDictLabel("weightOperateState", this.viewForm.operateState, "")}}</span></p>
    </div>
      <el-form :model="inputForm" ref="inputForm" v-loading="loading" :disabled="formReadOnly"
               label-width="120px">
        <table class="detail-table" cellspacing="0" cellpadding="0">
          <tr>
            <td class="table-title">作废时间</td>
            <td class="table-content">{{this.viewForm.createDate}}</td>
            <td class="table-title">作废人</td>
            <td class="table-content"><span v-if="viewForm.createBy !== undefined">{{this.viewForm.createBy.loginName}}</span></td>
          </tr>
          <tr>
            <td class="table-title">作废原因</td>
            <td class="table-content" colspan="3">{{this.viewForm.operateReason}}</td>
<!--            <td class="table-title"></td>-->
<!--            <td class="table-content"></td>-->
          </tr>
<!--          <tr>-->
<!--            <td class="table-title">状态</td>-->
<!--            <td class="table-content">-->
<!--              {{$dictUtils.getDictLabel("weightOperateState", this.viewForm.operateState, "")}}-->
<!--            </td>-->
<!--            <td class="table-title"></td>-->
<!--            <td class="table-content"></td>-->
<!--          </tr>-->
<!--          <tr>-->
<!--            <td class="table-title">作废皮重详情</td>-->
<!--            <td class="table-content"></td>-->
<!--            <td class="table-title"></td>-->
<!--            <td class="table-content"></td>-->
<!--          </tr>-->
          <tr>
            <td class="table-title">过磅单号</td>
            <td class="table-content"><span v-if="viewForm.weight!==undefined">{{this.viewForm.weight.weightCode}}</span></td>
            <td class="table-title">车牌号</td>
            <td class="table-content"><span v-if="viewForm.transport!==undefined">{{this.viewForm.transport.truckNumber}}</span></td>
          </tr>
          <tr>
            <td class="table-title">客户名称</td>
            <td class="table-content"><span v-if="viewForm.business!==undefined">{{this.viewForm.business.companyName}}</span></td>
            <td class="table-title">车辆识别</td>
            <td class="table-content"></td>
          </tr>
          <tr>
            <td class="table-title">货物名称</td>
            <td class="table-content"><span v-if="viewForm.product!==undefined">{{this.viewForm.product.name}}</span></td>
            <td class="table-title">磁卡卡面号</td>
            <td class="table-content"><span v-if="viewForm.card!==undefined">{{this.viewForm.card.cardNumber}}</span></td>
          </tr>
          <tr>
            <td class="table-title">皮重磅房</td>
            <td class="table-content"><span v-if="viewForm.tareRoom!==undefined">{{this.viewForm.tareRoom.name}}</span></td>
            <td class="table-title">设备编号</td>
            <td class="table-content"><span v-if="viewForm.tareEquip!==undefined">{{this.viewForm.tareEquip.outerCode}}</span></td>
          </tr>
          <tr>
            <td class="table-title">皮重时间</td>
            <td class="table-content"><span v-if="viewForm.tare!==undefined">{{this.viewForm.tare.weightTime}}</span></td>
            <td class="table-title">皮重</td>
            <td class="table-content"><span v-if="viewForm.tare!==undefined">{{this.viewForm.tare.weightMeasured}}</span></td>
          </tr>
          <tr>
            <td class="table-title">皮重(调整)</td>
            <td class="table-content"><span v-if="viewForm.weight!==undefined">{{this.viewForm.weight.weightTare}}</span></td>
            <td class="table-title"></td>
            <td class="table-content"></td>
          </tr>
        </table>
      </el-form>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        title: '',
        method: '',
        loading: false,
        queryId: '',
        inputForm: {
          card: {
            cardNumber: ''
          },
          tare: {
            weightTime: '',
            weightMeasured: ''
          },
          weight: {
            weightTare: '',
            weightCode: ''
          },
          tareEquip: {
            outerCode: ''
          },
          tareRoom: {
            name: ''
          },
          product: {
            name: ''
          },
          transport: {
            truckNumber: ''
          },
          business: {
            companyName: ''
          }
        },
        viewForm: {
          card: {
            cardNumber: ''
          },
          tare: {
            weightTime: '',
            weightMeasured: ''
          },
          weight: {
            weightTare: '',
            weightCode: ''
          },
          tareEquip: {
            outerCode: ''
          },
          tareRoom: {
            name: ''
          },
          product: {
            name: ''
          },
          transport: {
            truckNumber: ''
          },
          business: {
            companyName: ''
          }
        }
      }
    },
    props: {
      businessId: {
        type: String,
        default: ''
      },
      formReadOnly: {
        type: Boolean,
        default: false
      }
    },
    components: {
    },
    watch: {
      // 例如：当前为调价审批表单，对应的是销售调价业务，表是：t_business_product
      // 这里的business就指的是t_business_product的一个主键ID
      'businessId': {
        handler (newVal) {
          if (this.businessId) {
            this.init(this.businessId)
          } else {
            this.$nextTick(() => {
              this.$refs.inputForm.resetFields()
            })
          }
        },
        immediate: true,
        deep: false
      }
    },
    methods: {
      // 根据主键ID从接口获取详情数据
      init (id) {
        if (id) {
          this.loading = true
          this.inputForm.id = id
          this.$nextTick(() => {
            // this.$refs.inputForm.resetFields()
            this.$http({
              url: `/weight/exceptionQuery/queryById?id=${this.inputForm.id}`,
              method: 'get'
            }).then(({data}) => {
              this.viewForm = data.result
              this.inputForm = this.recover(this.inputForm, data.result)
              this.loading = false
            })
          })
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .title{
    margin-top: 5px;
    span:last-child{
      margin-left: 10px;
      font-size: 16px;
    }
  }
  ::v-deep.el-form{
    margin-top: 10px !important;
  }
  .detail-table{
    border: 1px solid #DDDDDD;
    border-bottom: none;
    td{
      padding: 12px 10px;
      border-right: 1px solid #DDDDDD;
      border-bottom: 1px solid #DDDDDD;
    }
    .table-title{
      width: 125px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #999999;
    }
    .table-content{
      width: 260px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;

      span:first-child{
        margin-right: 20px;
      }
    }
  }
</style>
